
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Sming Framework with Bootstrap best friends</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.css" rel="stylesheet">
	<script src="jquery.js"></script>
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

	<script>
	$( document ).ready(function() {
	
		(function worker() {
			$.getJSON('ajax/input', function(data) {
				$.each( data.gpio, function( key, val ) {
					var target = $('#gpio' + key);
					target.removeClass("label-default");
					if (val)
						target.removeClass("label-danger").addClass("label-success");
					else
						target.removeClass("label-success").addClass("label-danger");
				});
				setTimeout(worker, 400);
			});
		})();
		
		$(".switch-freq").click(function() {
			var freq = $(this).attr('data-value');
			$.getJSON('ajax/frequency', {value: freq}, function(data) {
				$("#display-freq").text(data.value);
			});
		});
		
	});
	</script>
  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">About</a></li>
            <li role="presentation"><a href="#">Contact</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Sming Framework</h3>
      </div>

      <div class="jumbotron">
        <h1>Sming AJAX Example</h1>
        <p class="lead">Sming: Let's do smart things!
				</p>
      </div>

      <div class="row marketing">
        <div class="col-lg-6">
          <h3>Reading Input value</h3>
          <p><span id="gpio0" class="label label-default">GPIO0</span>
					<p><span id="gpio2" class="label label-default">GPIO2</span>
        </div>

        <div class="col-lg-6">
          <h3>Send AJAX Command</h3>
					<p>Switch CPU frequency</p>
					<button type="button" class="switch-freq btn btn-info" data-value="80">80 MHz</button>
					<button type="button" class="switch-freq btn btn-primary" data-value="160">160 MHz</button>
					<p>&nbsp;
					<p>Current frequency:</p>
					<div id="display-freq" class="well well-lg">N/A</div>
        </div>
		
      </div>
	  
      <footer class="footer">
        <p>&copy; Company 2014</p>
      </footer>

    </div> <!-- /container -->
  </body>
</html>
